<template>
  <view class="search-component">
    <!-- 输入搜索内容 -->
    <view class="search-layout-input">
      <view class="icon-box" :class="className">
        <text
          class="iconfont icon-weibiaoti--10"
          @click="className = ''"
        ></text>
      </view>
      <view class="search-input-box">
        <input
          type="text"
          class="search-input"
          v-model="inputValue"
          placeholder="得物·男鞋"
          placeholder-class="placeholder-style"
          @focus="inputFocus"
        />
        <text
          v-if="inputValue != ''"
          class="iconfont end-icon icon-weibiaoti--13"
          @click="clearInputValue"
        ></text>

        <text v-else class="iconfont end-icon icon-weibiaoti--17"></text>
      </view>

      <text class="cancel-btn" v-if="className">搜索</text>
      <text class="iconfont cancel-btn icon-weibiaoti--45" v-else></text>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "search003",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      className: "",
      inputValue: "",
    });
    const inputFocus = () => {
      data.className = "left-show";
    };
    const clearInputValue = () => {
      data.inputValue = "";
    };
    return {
      clearInputValue,
      inputFocus,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.search-component {
  .search-layout-input {
    display: flex;
    justify-content: space-between;
    height: 90rpx;
    padding: 10rpx 20rpx;
    padding-right: 0rpx;
    box-sizing: border-box;
    background: #fff;
    .icon-box {
      line-height: 70rpx;
      width: 0rpx;
      overflow: hidden;
      text-align: left;
      transition: 0.3s;
      .icon-weibiaoti--10 {
        font-size: 40rpx;
      }
      &.left-show {
        width: 50rpx;
      }
    }
    .search-input-box {
      position: relative;
      flex: 1;
      .search-input {
        width: 100%;
        height: 100%;
        padding-left: 20rpx;
        box-sizing: border-box;
        color: #000;
        border-radius: 10rpx;
        background: #eff0f1;
        overflow: hidden;
        font-size: 24rpx;
        //   placeholder样式修改
        .placeholder-style {
          color: #777;
        }
      }
      .end-icon {
        font-size: 34rpx;
        position: absolute;
        color: #666;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .cancel-btn {
      line-height: 70rpx;
      margin: 0 20rpx;
      font-size: 28rpx;
      font-weight: 500;
      &.icon-weibiaoti--45 {
        font-size: 50rpx;
        font-weight: 700;
        background: linear-gradient(
          to right bottom,
          #ff4646,
          #ff7b00,
          #06a800,
          #001aff,
          #ff00f2
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
